<template>
	<view class="index_container">
		
		<swiperTabHead ref="swiperTabHeadRef" :tabBars="tabBars" v-model:tabBarsIndex="tabBarsIndex" ></swiperTabHead>
		<swiper 
			class="swiper-box" 
			:style="{height:swiperHeight+'px',}" 
			:current="tabBarsIndex"
			@change="tabChange">
			<swiper-item class="swiper-item"  v-for="(item,index) of newList" :key="index">
				<scroll-view  class="scroll-v list" :scroll-y="true" @scrolltolower="loadingScroll" @scrolltoupper="pullRefult">
					<template v-if="item.list.length>0">
						<!-- 图文列表 -->
						<indexList v-for="(item1,index1) in item.list" :key="item1.id" :item="item1"/>
						<!-- 上拉加载 -->
						<loadMore :loadingText="item.loadingText"></loadMore>
					</template>
					<template v-else>
						<noThing/>
					</template>
				</scroll-view>
			</swiper-item>

		</swiper>

	</view>

</template>

<script>
	import indexList from '../../component/index/index-list.vue';
	import swiperTabHead from '../../component/index/swiper-tab-head.vue';
	import loadMore from '../../component/common/load-more.vue';
	import noThing from '../../component/common/no-thing/no-thing.vue';
	import user from '../../common/user.js';
	import {getPostClass,getPostListPage} from '../../api/postApi.js';
	export default {
		data() {
			return {
				tabBarsIndex: 0,
				swiperHeight: 500,
				tabBars: [],
				newList: [],
				

			}
		},
		async onLoad() {
			uni.getSystemInfo({
				success:(res)=> {
					let height = res.windowHeight - uni.upx2px(80);
					this.swiperHeight = height;
				}
			})
		    this.getNav();
		},
		// 监听原生输入框事件
		onNavigationBarSearchInputClicked(){
			uni.navigateTo({
				url:"/pages/search/search"
			})
		},
		onNavigationBarButtonTap(e) {
			if(e.index==0){//签到
				
			}else if(e.index==1){//发布
				user.navigate({
					url:"/pages/add-input/add-input"
				})
			}
		},
		methods: {
			loadingScroll(index){
				// 判断如果加载状态不等于加载更多
				if(this.newList[this.tabBarsIndex].loadingText!="上拉加载更多")return;
				this.newList[this.tabBarsIndex].loadingText="加载中...";
				this.getPost(true);
			},
			tabChange(e){
				this.tabBarsIndex = e.detail.current;
				this.$refs.swiperTabHeadRef.switchTabbar(null,this.tabBarsIndex)
				this.getPost();
			},
			// 获取文章分类
			getNav(){
				getPostClass().then(res=>{
					for(let i = 0;i<res.length;i++){
						this.tabBars.push(res[i])
						this.newList.push({
							loadingText:"上拉加载更多",
							list:[],
							page:1,
							firstload:false
						})
					}
					this.getPost();
				})
				
			},
			// 获取文章列表
			getPost(isloading){
				if(isloading){
					this.newList[this.tabBarsIndex].page++;
					getPostListPage(this.newList[this.tabBarsIndex].page,this.tabBars[this.tabBarsIndex].id).then(res=>{
						this.newList[this.tabBarsIndex].list.push(...res)
						if(res.length==0){
							this.newList[this.tabBarsIndex].loadingText="没有更多数据了...";
						}else {
							this.newList[this.tabBarsIndex].loadingText="上拉加载更多";
						}
					})
				}else {
					if(!this.newList[this.tabBarsIndex].firstload){
						getPostListPage(this.newList[this.tabBarsIndex].page,this.tabBars[this.tabBarsIndex].id).then(res=>{
							this.newList[this.tabBarsIndex].list.push(...res)
							this.newList[this.tabBarsIndex].firstload=true;
							console.log(res)
						})
					}
					
				}
				console.log(this.newList)
				
			},
			// 上拉刷新
			pullRefult(){
				getPostListPage(1,this.tabBars[this.tabBarsIndex].id).then(res=>{
					this.newList[this.tabBarsIndex].list.splice(0,this.newList[this.tabBarsIndex].list.length);
					this.newList[this.tabBarsIndex].list.push(...res)
					this.newList[this.tabBarsIndex].page = 1;
					this.newList[this.tabBarsIndex].firstload=true;
					this.newList[this.tabBarsIndex].loadingText="上拉加载更多";
				})
			}
		},
		components: {
			indexList,
			swiperTabHead,
			loadMore,
			noThing,
		}
	}
</script>

<style>
	
	.scroll-v {
	    height: 100%;
	    /* #ifndef MP-ALIPAY */
	    flex-direction: column;
	    /* #endif */
	    width: 750rpx;
		width:100%;
	}
	
	
	
	
	
</style>
